<!-- 
  招聘中心-职位搜索
 -->
<template>
  <div class="search">
    <img src="@/assets/images/search-icon.png" alt="" class="search-icon" />
    <el-cascader
      v-model="qureyParams.city"
      style="width: 150px; margin-right: 13px; margin-bottom: 13px"
      :show-all-levels="false"
      size="mini"
      :options="provinceAndCityData"
      :props="{ value: 'label' }"
      @change="handleCityChange"
      placeholder="请选择城市"
      clearable
    ></el-cascader>
    <el-select
      v-model="qureyParams.recruitment"
      style="width: 150px; margin-right: 13px; margin-bottom: 13px"
      placeholder="招聘对象"
      class="search-select"
      size="mini"
      clearable
    >
      <el-option
        v-for="item in studentType"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-cascader
      style="min-width: 150px; margin-right: 13px; margin-bottom: 13px"
      v-model="qureyParams.educations"
      :options="educationOptions"
      collapse-tags
      size="mini"
      :props="{ multiple: true }"
      placeholder="学历要求"
      clearable
    ></el-cascader>
    <el-popover
      placement="bottom"
      style="margin-right: 13px; width: 150px; margin-bottom: 13px"
      trigger="click"
    >
      <div class="salary-block">
        <el-input
          type="number"
          style="width: 130px; margin: 0 13px"
          v-model="qureyParams.lowestSalary"
          @keyup.enter.native="sumitSalary"
          clearable
          size="mini"
        >
        </el-input
        >-<el-input
          type="number"
          style="width: 150px; margin: 0 13px"
          v-model="qureyParams.highestSalary"
          clearable
          size="mini"
          @keyup.enter.native="sumitSalary"
        >
          <template slot="append">元/天</template>
        </el-input>
        <el-button size="mini" @click="cealrSalary">清除</el-button>
        <el-button size="mini" type="danger" @click="sumitSalary"
          >确定</el-button
        >
      </div>
      <div class="salary-range" slot="reference">
        {{ salary ? salary : "薪资要求" }}
      </div>
    </el-popover>
    <!-- <el-cascader
      v-model="qureyParams.industry"
      style="min-width: 150px; margin-right: 13px; margin-bottom: 13px;"
      :show-all-levels="false"
      :options="AreaOption"
      :props="{ value: 'label' }"
      size="mini"
      @change="handleAreaChange"
      placeholder="行业类型"
      clearable
    >
    </el-cascader> -->
    <el-cascader
      style="min-width: 150px; margin-right: 13px; margin-bottom: 13px"
      v-model="qureyParams.industry"
      :options="AreaOption"
      collapse-tags
      size="mini"
      :props="{ multiple: true }"
      placeholder="行业类型"
      clearable
    ></el-cascader>
    <el-select
      v-model="qureyParams.jobLanguage"
      style="width: 150px; margin-right: 13px; margin-bottom: 13px"
      placeholder="工作语言"
      class="search-select"
      size="mini"
      clearable
    >
      <el-option
        v-for="item in workLanguage"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      placeholder="请输入关键词"
      prefix-icon="el-icon-search"
      v-model="qureyParams.key"
      style="width: 260px; margin-right: 15px"
    >
    </el-input>
    <el-button size="mini" type="primary" @click="sumitFun">搜索</el-button>
    <el-button
      size="mini"
      style="font-size: 15px; color: #3d6cb0"
      type="text"
      @click="clearCondition"
      >清空筛选条件</el-button
    >
  </div>
</template>

<script>
import {
  provinceAndCityData,
  studentType,
  workLanguage,
  AreaOption,
  educationOptions,
} from "@/utils/frontDataDict.js";

export default {
  // 组件名称
  name: "search",
  // 组件参数 接收来自父组件的数据
  props: { multiple: true },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      educationOptions: educationOptions.filter(
        (item) => item.label !== "不限"
      ),
      AreaOption: AreaOption,
      workLanguage: workLanguage, //.filter((item) => item.label !== "不限"),
      studentType: studentType,
      provinceAndCityData: provinceAndCityData,
      options: [{ key: "1", value: "全国" }],
      salary: "",
      qureyParams: {
        key: "",
        city: [],
        jobLanguage: "",
        industry: [],
        educations: [],
        recruitment: "",
        lowestSalary: "", // 最低薪资
        highestSalary: "", //最高薪资
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    setOption(key, value) {
      this.$set(this.qureyParams, key, value);
    },
    // 清除薪资范围
    cealrSalary() {
      this.qureyParams.lowestSalary = "";
      this.qureyParams.highestSalary = "";
      this.salary = "";
      this.sumitFun();
      document.body.click();
    },
    sumitSalary() {
      this.salary =
        this.qureyParams.lowestSalary + "-" + this.qureyParams.highestSalary;
      this.sumitFun();
      document.body.click();
    },
    clearCondition() {
      this.cealrSalary();
      this.qureyParams.city = "";
      this.qureyParams.educations = [];
      this.qureyParams.jobLanguage = "";
      this.qureyParams.key = "";
      this.qureyParams.industry = [];
      this.qureyParams.recruitment = "";
      let data = {
        city: "",
        industry: [],
        jobName: "",
        studentType: "",
        jobLanguage: "",
        lowestSalary: "",
        highestSalary: "",
        recruitment: "",
        educations: [],
      };
      this.$parent.searchFun(data);
    },
    handleCityChange(data) {
      console.log("城市>>>", data);
    },
    handleAreaChange(data) {
      console.log("行业>>>", data);
    },
    sumitFun() {
      let {
        key: jobName,
        studentType,
        jobLanguage,
        lowestSalary,
        highestSalary,
        recruitment,
      } = this.qureyParams;
      let educations = this.qureyParams.educations.map((item) =>
        JSON.stringify(item)
      );
      let industry = [
        ...new Set(
          this.qureyParams.industry.map((item) => JSON.stringify(item))
        ),
      ];
      let data = {
        city: "",
        industry,
        educations,
        jobName: jobName || "",
        studentType,
        jobLanguage,
        lowestSalary,
        highestSalary,
        recruitment,
      };
      if (this.qureyParams.city.length > 0) {
        data.city = this.qureyParams.city[1];
      }
      if (data.industry.length === 0) {
        delete data.industry;
      }
      console.log("data>>>>", data);
      this.$parent.searchFun(data);
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.search {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 30px;
  position: relative;
  .search-icon {
    width: 18px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 10px;
  }

  .search-select {
    width: 160px;
    margin-right: 13px;
  }
}

.mr13 {
  margin-right: 13px;
}

.salary-range {
  position: relative;
  display: inline-block;
  width: 150px;
  font-size: 14px;
  padding-right: 30px;
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  color: #c0c4cc;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .el-input--prefix .el-input__inner {
  width: 100% !important;
}
.el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  border: none;
  font-weight: 500;
}
.el-button--danger {
  background: #4677b9;
  border: none;
}
</style>
